<template>
  <li :class="classname" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
    <span class="v-contextmenu-submenu__title">
      <slot name="title">{{ title }}</slot>

      <span class="v-contextmenu-iconfont v-contextmenu-submenu__icon"></span>
    </span>

    <ul v-show="hover" ref="submenu" :class="submenuCls">
      <slot></slot>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'VContextmenuSubmenu',

  props: {
    title: {
      type: String,
      default: ''
    },
    disabled: Boolean
  },

  data() {
    return {
      hover: false,
      submenuPlacement: []
    }
  },
  computed: {
    classname() {
      return {
        'v-contextmenu-item': true,
        'v-contextmenu-submenu': true,
        'v-contextmenu-item--hover': this.hover,
        'v-contextmenu-item--disabled': this.disabled
      }
    },
    submenuCls() {
      return ['v-contextmenu', ...this.submenuPlacement]
    }
  },

  methods: {
    handleMouseenter(event) {
      if (this.disabled) {
        return
      }

      const { target } = event
      const targetDimension = target.getBoundingClientRect()

      this.hover = true

      this.$emit('mouseenter', this, event)

      this.$nextTick(() => {
        const submenuWidth = this.$refs.submenu.clientWidth
        const submenuHeight = this.$refs.submenu.clientHeight
        const submenuPlacement = []

        if (targetDimension.right + submenuWidth >= window.innerWidth) {
          submenuPlacement.push('left')
        } else {
          submenuPlacement.push('right')
        }

        if (targetDimension.bottom + submenuHeight >= window.innerHeight) {
          submenuPlacement.push('bottom')
        } else {
          submenuPlacement.push('top')
        }

        this.submenuPlacement = submenuPlacement
      })
    },
    handleMouseleave(event) {
      if (this.disabled) {
        return
      }

      this.hover = false

      this.$emit('mouseleave', this, event)
    }
  }
}
</script>
